<template>
<div >
   <van-nav-bar
  title="地图找房"
  left-arrow
  @click-left="$router.go(-1)"
/>
<baidu-map :center="position ? position : $store.state.city.cityName" 
:zoom="zoom"
 @ready="handler" 
 class="map">
   <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
   <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
   <MyOverlay :position="{lng: item.coord.longitude,lat: item.coord.latitude }"
      :text="item"
      :level="zoom"
     v-for="(item,index) in list" :key="index" 
     @findArea="findArea"
     @showHouse="showHouse"
   ></MyOverlay>
</baidu-map>
<van-popup v-model="isShow" position="bottom" :style="{ height: '40%' }">
  <div class="top">
    <div class="left">
      房屋列表
    </div>
    <div  @click="router.push('/looking')" class="right" > 更多房源</div>
  </div>
  <div class="list">
<HouseItem v-for="(item,index) in houseList" :key="index" :item="item"></HouseItem>
  </div>
</van-popup>
</div>
  
</template>
<script>
import HouseItem from '@/components/house-item.vue'
import MyOverlay from '@/components/MyOverlay.vue'
import {Toast} from 'vant'
import {mapHouse,getAreaHouseList} from '@/api/house'

export default {
  components:{
    MyOverlay,
    HouseItem
  },
  async created(){
    Toast.loading({
  message: '加载中...',
  forbidClick: true,
});
  const res= await mapHouse(this.$store.state.city.cityCode)
   Toast.clear();
 
  this.list=res.body
  },
  data () {
    return {
      list:[],
      houseList:[],
      position:'',
      zoom: 11,
      isShow:false,
    }
  },
  methods: {
    handler ({  map }) {
      /* 地图加载完毕 */
      map.addEventListener('tilesloaded', function () {
        // 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件
        map.disableDragging()
      })

      //  触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。
      map.addEventListener('touchmove', function () {
        map.enableDragging()
      })
      //  触摸结束时触发次此事件  此时开启禁止拖动
      map.addEventListener('touchend', function () {
        map.disableDragging()
      })
    
    },
    //第一层放大
   async findArea(value,position){
       Toast.loading({
   message: '加载中...',
    forbidClick: true,
      });
       const res = await mapHouse(value)
       Toast.clear()
       this.position = { lng: position.longitude,lat: position.latitude }
       this.list=res.body
       this.zoom+=2
    },
   async showHouse(value){
     const res=  await getAreaHouseList(value)
       console.log(res);
       this.houseList=res.body.list
       console.log(this.houseList);
       this.isShow=true
    }
  },

}
</script>

<style scoped lang="less">
 .map{
  width: 100%;
  height: 620px;;
 }
 .top{
  
  height: 50px;
    background-color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      font-weight: 600;
    }
    .right{
     font-size: 15px;
    }
 }
</style>
